<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.right{
				color: green;
			}
			.error{
				color: red;
			}
		</style>
	</head>
	<body>
		<input type='text' class='uname' placeholder="请输入用户名" />
		<span></span>
		<br>
		<input type='text' class='tel' placeholder="请输入手机号" />
		<span></span>
		<br>
		<input type='text' class='qq' placeholder="请输入QQ号码" />
		<span></span>
		<br>
		<input type='text' class='nc' placeholder="请输入您的昵称" />
		<span></span>
		<br>
		<input type='text' class='dx' placeholder="请输入短信验证码" />
		<span></span>
		<br>
		<input type='password' class='code1' placeholder="请输入登录密码" />
		<span></span>
		<br>
		<input type='password' class='code2' placeholder="请再次输入登录密码" />
		<span></span>
		<br>
		<script>
			// 1.国内座机号码验证 010-12345678 或者 0530-1234567
			// 正则里面的或符号 |
			var reg = /^\d{3}-\d{8}|\d{4}-\d{7}$/;
			console.log(reg.test('020-45678910')); //true
			console.log(reg.test('0100-4567891')); //true			
			
			// 2.表单验证
			// 用户名验证	
			var uname = document.querySelector('.uname');
			var reg_name = /^[a-zA-Z0-9-_]{6,16}$/;
			// uname.onblur = function(){
			// 	if(reg_name.test(this.value)){
			// 		this.nextElementSibling.className = 'right';
			// 		this.nextElementSibling.innerHTML = '用户名输入正确！'
			// 	}else{
			// 		this.nextElementSibling.className = 'error';
			// 		this.nextElementSibling.innerHTML = '用户名输入错误！'
			// 	}
			// }
			// 手机号验证	
			var tel = document.querySelector('.tel');
			var reg_tel = /^1[3|5|8]{2}\d{8}$/;
			//QQ号码验证
			var qq = document.querySelector('.qq');
			var reg_qq = /^[1-9]\d{4,}$/;
			// 昵称验证	
			var nc = document.querySelector('.nc');
			var reg_nc = /^[\u4e00-\u9fa5]{2,4}$/;
			// 短信验证
			var dx = document.querySelector('.dx');
			var reg_dx = /^\d{6}$/;
			// 密码验证1	
			var code1 = document.querySelector('.code1');
			//var reg_code = /^[a-zA-Z0-9-_]{6,16}$/;
			var reg_code = /^\w{6,16}$/;
			// 密码验证2
			var code2 = document.querySelector('.code2');
			
			// 函数封装			
			regexp(uname, reg_name);
			regexp(tel, reg_tel);
			regexp(qq, reg_qq);
			regexp(nc, reg_nc);
			regexp(dx, reg_dx);
			regexp(code1, reg_code);

			function regexp(ele, reg) {
				ele.onblur = function() {
					if (reg.test(this.value)) {
						this.nextElementSibling.className = 'right';
						this.nextElementSibling.innerHTML = '恭喜您输入正确！';
					} else {
						this.nextElementSibling.className = 'error';
						this.nextElementSibling.innerHTML = '您的输入有误！';
					}
				};
				code2.onblur = function() {
					if (this.value == code1.value) {
						this.nextElementSibling.className = 'right';
						this.nextElementSibling.innerHTML = '恭喜您输入正确！';
					} else {
						this.nextElementSibling.className = 'error';
						this.nextElementSibling.innerHTML = '两次密码输入不一致！';
					}
				}
			}
		</script>
	</body>
</html>
